<template>
	<view class="container">
		<!-- 药品详情区域 -->
		<view class="detail-box">
			<!-- 药品名称 -->
			<view class="detail-header">
				<text class="medicine-name">{{medicineInfo.drugName}}</text>
				<text class="medicine-subtitle">药品详情</text>
			</view>
			
			<!-- 药品图片位置 -->
			<view class="medicine-image-placeholder">
				<view class="image-wrapper">
					<text class="placeholder-text">药品图片</text>
				</view>
			</view>
			
			<!-- 药品详细信息 -->
			<view class="detail-content">
				<view class="info-section">
					<view class="info-item">
						<text class="label">药品剂量</text>
						<text class="value" v-if="!isEditing">{{medicineInfo.drugDosage}}</text>
						<input v-else v-model="editedMedicineInfo.drugDosage" class="edit-input" />
					</view>
					
					<view class="info-item">
						<text class="label">服用频率</text>
						<text class="value" v-if="!isEditing">{{medicineInfo.frequency}}</text>
						<input v-else v-model="editedMedicineInfo.frequency" class="edit-input" />
					</view>
					
					<view class="info-item">
						<text class="label">生产日期</text>
						<text class="value" v-if="!isEditing">{{medicineInfo.productionTime}}</text>
						<input v-else v-model="editedMedicineInfo.productionTime" class="edit-input" />
					</view>
					
					<view class="info-item">
						<text class="label">过期日期</text>
						<text class="value highlight" v-if="!isEditing">{{medicineInfo.uselessTime}}</text>
						<input v-else v-model="editedMedicineInfo.uselessTime" class="edit-input" />
					</view>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button v-if="!isEditing" @click="startEditing" class="edit-button">修改</button>
				<button v-else @click="saveChanges" class="save-button">保存</button>
				<button v-if="isEditing" @click="cancelEditing" class="cancel-button">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			medicineInfo: {
				drugName: '阿莫西林胶囊',
				drugDosage: '0.25g/片',
				frequency: '每天3次，饭后服用',
				productionTime: '2024-01-01',
				uselessTime: '2026-01-01'
			},
			isEditing: false, // 是否处于编辑状态
			editedMedicineInfo: {} // 用于存储编辑中的药品信息
		}
	},
	methods: {
		// 开始编辑
		startEditing() {
			this.isEditing = true;
			// 将当前药品信息复制到编辑对象中
			this.editedMedicineInfo = { ...this.medicineInfo };
		},
		// 保存修改
		saveChanges() {
			this.isEditing = false;
			// 将编辑后的信息更新到 medicineInfo
			this.medicineInfo = { ...this.editedMedicineInfo };
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			});
		},
		// 取消编辑
		cancelEditing() {
			this.isEditing = false;
			uni.showToast({
				title: '已取消修改',
				icon: 'none'
			});
		}
	},
	onLoad(options) {
		// TODO: 根据传入的参数获取药品详情
		if (options.id) {
			// 这里添加获取药品详情的逻辑
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 20rpx;
	height: 100vh;
	background: linear-gradient(180deg, #f0f5ff 0%, #f5f5f5 100%);
	display: flex;
	justify-content: center;
	align-items: center;
}

// 药品详情区域样式
.detail-box {
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	width: 90%;
	max-width: 600rpx;
	height: 90vh; // 限制高度，确保内容不超出屏幕
	display: flex;
	flex-direction: column;
	justify-content: space-between; // 内容均匀分布
	
	.detail-header {
		padding: 20rpx 0 30rpx;
		margin-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
		position: relative;
		text-align: center;
		
		.medicine-name {
			font-size: 40rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 12rpx;
			display: block;
		}
		
		.medicine-subtitle {
			font-size: 24rpx;
			color: #2ac2d1;
			background: rgba(42, 194, 209, 0.1);
			padding: 6rpx 16rpx;
			border-radius: 20rpx;
		}
	}
	
	.medicine-image-placeholder {
		margin: 0 -30rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
		
		.image-wrapper {
			height: 200rpx; // 图片高度进一步变小
			background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
			
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
			}
			
			.placeholder-text {
				font-size: 28rpx;
				color: #999;
				letter-spacing: 2rpx;
			}
		}
	}
	
	.detail-content {
		flex: 1; // 内容区域自适应剩余空间
		overflow-y: hidden; // 禁止内容区域滚动
		margin-bottom: 20rpx;
		
		.info-section {
			background: #f8f9fa;
			border-radius: 16rpx;
			padding: 20rpx;
		}
		
		.info-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			border-bottom: 2rpx solid rgba(0,0,0,0.03);
			transition: all 0.3s ease;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:hover {
				background: rgba(42, 194, 209, 0.03);
			}
			
			.label {
				width: 160rpx;
				font-size: 28rpx;
				color: #666;
				font-weight: 500;
			}
			
			.value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				
				&.highlight {
					color: #2ac2d1;
					font-weight: 500;
				}
			}

			.edit-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				border: 1rpx solid #ddd;
				padding: 10rpx;
				border-radius: 8rpx;
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: center; // 按钮居中
		margin-top: 20rpx;

		button {
			margin: 0 10rpx; // 按钮间距
			font-size: 28rpx; // 按钮字体适中
			padding: 15rpx 30rpx; // 按钮大小适中
			border-radius: 50rpx; // 圆角按钮
			border: none;
			background-color: #2ac2d1;
			color: #fff;
			flex: 1; // 按钮宽度自适应

			&.cancel-button {
				background-color: #f0f0f0;
				color: #666;
			}
		}
	}
}
</style>